<script setup lang="ts">
import { Moon, Sunny } from '@element-plus/icons-vue';
import { onBeforeMount, ref } from 'vue';
import { THEME_MODE_STORE_KEY } from '../../utils';

type ThemeMode = 'light' | 'dark' | ''

const themeMode = ref<ThemeMode>('')

const toggleTheme = (v: any) => {
  const { classList } = document.documentElement
  if ((v as ThemeMode) === 'dark') {
    classList.replace('light', v)
  } else {
    classList.replace('dark', v)
  }
  localStorage.setItem(THEME_MODE_STORE_KEY, v)
}

onBeforeMount(() => {
  themeMode.value = (localStorage.getItem(THEME_MODE_STORE_KEY) ?? '') as any
})
</script>

<template>
  <ElSwitch
    inline-prompt
    active-value="dark"
    inactive-value="light"
    active-text="夜"
    inactive-text="日"
    :active-action-icon="Moon"
    :inactive-action-icon="Sunny"
    v-model="themeMode"
    @change="toggleTheme" />
</template>
